<template>
  <div class="fresh">
    <el-row class="title">{{title}}</el-row>
    <el-row v-for="word in words" :key="word">
      <a v-for="w in word" :key="w" class="word">{{w}}</a>
    </el-row>
    <el-row style="padding-top: 20px">
      <a v-for="b in bottom" :key="b" class="word">{{b}}</a>
    </el-row>
  </div>
</template>

<script>
export default{
  name: "Fresh",
  props: {
    title: String,
    words: Array,
    bottom: Array
  }
};
</script>

<style scoped>
.title {
  font-size: 16px;
  font-weight: 550;
  padding-bottom: 10px;
}

.word {
  font-size: 14px;
  padding-right: 3px;
  cursor: pointer;
  transition-duration: 1s;
}

.word:hover {
  text-decoration: underline;
  color: darkslategrey;
  transition-duration: 1s;
}
</style>